<template>
	<view>
		<!-- 导航栏 -->
		<freenavbar :title="title" :msgNum="msgNum" fixedStatus/>
		
		<!-- 通讯录列表 -->
		<freeListItem borderBottom v-for="(item,index) in addressList" @click="click" :key="index" :cover="item.cover" :title="item.title"></freeListItem>
		
		<!-- 注意！！！ v-for 和 v-if  是不能写在同一个标签里面的 包一层 block-->
		<block class="" v-for="(item,index) in list" :key="index">
			<view class="" v-if="item.data.length" >
				<view class="py-2 px-3 border-bottom bg-light">
					<text class="font-md text-dark">{{item.letter}}</text>
				</view>
				<freeListItem borderBottom @click="click" v-for="(items,indexs) in item.data" :key="indexs" cover="/static/images/mail/friend.png" :title="items"></freeListItem>
			</view>
		</block>
		
	</view>
</template>

<script>
	import freenavbar from'@/components/free-ui/free-nav-bar';//顶部导航组件
	import freeListItem from'@/components/free-ui/free-list-item';//顶部导航组件
	export default {
		components:{freenavbar,freeListItem},
		data() {  
			return {
				title:'通讯录',
				msgNum:0,//消息数量
				addressList:[
					{
						cover:'/static/images/mail/friend.png',
						title:'新的朋友',
						event:''
					},
					{
						cover:'/static/images/mail/group.png',
						title:'群聊',
						event:''
					},
					{
						cover:'/static/images/mail/tag.png',
						title:'标签',
						event:''
					},
				],
				list:[
					{
						"letter": "A",
						"data": [
							"鞍山市",
							"安庆市",
							"安阳市",
							"阿坝州",
							"安顺市",
							"安康市",
						]
					},
					{
						"letter": "B",
						"data": [
							"保样",
							"本溪市",
							"蚌埠"
						]
					},
					{
						"letter": "C",
						"data": [
							"成都市",
							"重庆市",
							"长沙市",
						]
					},
					{
						"letter": "D",
						"data": [
							 "大连市",
							 "东莞市",
						]
					},
					{
						"letter": "E",
						"data": [
							 "鄂尔多斯市",
							 "鄂州市",
							 "恩施州",
						]
					},
					{
						"letter": "F",
						"data": [
							 "福州市",
							 "佛山市",
						]
					},
					{
						"letter": "G",
						"data": [
							 "广州市",
							 "果洛州",
						]
					},
					{
						"letter": "H",
						"data": [
							 "杭州市",
							 "合肥市",
							 "哈尔滨市",
						]
					},
					{
						"letter": "J",
						"data": [
							 "济南市",
						]
					},
					{
						"letter": "K",
						"data": [
							 "昆明市",
							 "克孜勒苏柯州",
						]
					},
					{
						"letter": "L",
						"data": [
							 "洛阳市",
							 "兰州市",
						]
					},
					{
						"letter": "M",
						"data": [
								 "绵阳市",
						]
					},
					{
						"letter":"N",
						"data": [
							"南京市",
						]
					},
					{
						"letter":"P",
						"data": [
						]
					},
					{
						"letter": "Q",
						"data": [
								 "青岛市",
								 "黔西南州",
								 "黔东南州",
						]
					},
					{
						"letter": "R",
						"data": [
								 "日照市",
								 "日喀则地区",
						]
					},
					{
						"letter": "S",
						"data": [
								 "深圳市",
								 "上海市",
						]
					},
					{
						"letter": "T",
						"data": [
								 "天津市",
								 "太原市",
								 "唐山市",
						]
					},
					{
						"letter": "W",
						"data": [
								 "武汉市",
						],
					},
					{
						"letter": "X",
						"data": [
							 "西安市",
							 "西宁市",
						]
					},
					{
						"letter": "Y",
						"data": [
								 "烟台市",
								 "银川市",
						]
					},
					{
						"letter": "Z",
						"data": [
								 "郑州市",
								 "遵义市",
								 "株洲市",
						]
					},
				]
			}
		},
		methods: {
			// 子组件向父组件传递的事件
			click(e){
				uni.showToast({
					icon:'none',
					title:e,
				})
			}
		}
	}
</script>

<style>
	@import '@/common/free.css';
	@import '@/common/common.css';
	@import '@/common/comicon.css';
</style>
